<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <base href="http://localhost:81/resources/back/">

    <link href="css/H-ui.min.css" rel="stylesheet" type="text/css"/>
    <link href="css/H-ui.admin.css" rel="stylesheet" type="text/css"/>
    <link href="lib/icheck/icheck.css" rel="stylesheet" type="text/css"/>
    <link href="lib/Hui-iconfont/1.0.1/iconfont.css" rel="stylesheet" type="text/css"/>
    <link rel="stylesheet" type="text/css" href="lib/webuploader/0.1.5/webuploader.css">

</head>
<body>
<div class="pd-20">
    <form method="post" class="form form-horizontal" id="form-goods-add">
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品名称：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="小米" placeholder="" id="gname" name="gname"
                       datatype="*2-16" nullmsg="商品名称不能为空">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品价格：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="1998" placeholder="" name="gprice"
                       datatype="*">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品父类型：</label>
            <div class="formControls col-5">
                <span class="select-box" style="width:150px;">
				    <select class="select" name="gtypePid" id="gtypePid" size="1">
				    </select>
				</span>
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品子类型：</label>
            <div class="formControls col-5">
                <span class="select-box" style="width:150px;">
				    <select class="select" name="gtypeCid" id="gtypeCid" size="1">
				    </select>
				</span>
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>库存：</label>
            <div class="formControls col-5">
                <input type="text" class="input-text" value="100" placeholder="" name="gstock"
                       datatype="n">
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"><span class="c-red">*</span>商品描述</label>
            <div class="formControls col-5">
                <textarea name="gdesc" cols="" rows="" class="textarea" placeholder="说点什么...100个字符以内" dragonfly="true"
                          onKeyUp="textarealength(this,100)">雷总的小米手机</textarea>
                <p class="textarea-numberbar"><em class="textarea-length">0</em>/100</p>
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <label class="form-label col-3"> 商品图片：</label>
            <input type="hidden" id="gpng" name="gpng">
            <div id="uploader-demo">
                <!--用来存放item-->
                <div id="fileList" class="uploader-list"></div>
                <div id="filePicker">选择图片</div>
            </div>
            <div class="col-4"></div>
        </div>
        <div class="row cl">
            <div class="col-9 col-offset-3">
                <input class="btn btn-primary radius" type="submit" value="&nbsp;&nbsp;提交&nbsp;&nbsp;">
            </div>
        </div>

    </form>
</div>
<script type="text/javascript" src="lib/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="lib/icheck/jquery.icheck.min.js"></script>
<script type="text/javascript" src="lib/Validform/5.3.2/Validform.min.js"></script>
<script type="text/javascript" src="lib/layer/1.9.3/layer.js"></script>
<script type="text/javascript" src="js/H-ui.js"></script>
<script type="text/javascript" src="js/AjaxUtils.js"></script>
<script type="text/javascript" src="js/H-ui.admin.js"></script>
<script type="text/javascript" src="http://localhost:81/resources/back/lib/My97DatePicker/WdatePicker.js"></script>
<script type="text/javascript" src="lib/webuploader/0.1.5/webuploader.js"></script>
<script type="text/javascript">

    function initGoodsType(id, pEleId) {
        // 1.查询所有的大类
        get("back/goodsTypeController/getGoodsTypeListByPid/" + id, function (data) {
            var pidEle = $("#" + pEleId);
            // 在新元素之前首先应该情况当前的元素
            // pidEle.childNodes().remove();
            var chilLen = pidEle.children().length;
            if (chilLen > 0) {
                pidEle.children().remove();
            }
            for (var i = 0; i < data.length; i++) {
                // 1、创建option元素
                var o = document.createElement("option");
                o.value = data[i].id;
                o.text = data[i].goodsTypeName;

                // 2.把这个option元素添加到pidEle
                pidEle.append(o);
            }
        });
    }

    $(function () {

        var uploader = WebUploader.create({
            auto: true,
            server: 'http://localhost:81/resources/file/upload',
            pick: '#filePicker',
            // 只允许选择图片文件。
            accept: {
                title: 'Images',
                extensions: 'gif,jpg,jpeg,bmp,png',
                mimeTypes: 'image/*'
            }
        });
        // 当有文件添加进来的时候
        uploader.on('fileQueued', function (file) {
            var $li = $(
                '<div id="' + file.id + '" class="file-item thumbnail">' +
                '<img>' +
                '<div class="info">' + file.name + '</div>' +
                '</div>'
                ),
                $img = $li.find('img');
            // $list为容器jQuery实例
            $("#fileList").append($li);

            uploader.makeThumb(file, function (error, src) {
                if (error) {
                    $img.replaceWith('<span>不能预览</span>');
                    return;
                }

                $img.attr('src', src);
            }, 100, 100);
        });

        // a.png|b.png|c.png
        // 服务端有数据返回就会触发这个函数
        uploader.on('uploadSuccess', function (file, resp) {
            var url = resp._raw;
            console.info(url);
            var gpng = $("#gpng").val();
            if (gpng) {
                // 隐藏域中已经包含了图片
                url = gpng + "|" + url;
            }
            // 图片是第一次上传
            $("#gpng").val(url);
        });

        initGoodsType(-1, "gtypePid");
        // 用户选择了父类id后查询小类
        $("#gtypePid").change(function () {
            var pid = $(this).val();
            initGoodsType(pid, "gtypeCid");
        });

        $("#form-goods-add").Validform({
            tiptype: 2,
            callback: function (form) {
                submit(form, "back/goods/addGood");
                console.info(form);
                return false;
            }
        });
    });
</script>
</body>
</html>